<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui 排班系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
    <link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
    <link href="roster.css" rel="stylesheet" />
</head>

<body>
    <div class="page-container">
        <div class="workshop-selector">
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">选择车间：</label>
                    <div class="layui-input-block">
                        <select id="workshopSelect" lay-filter="workshopSelect" lay-search>
                            <option value="">请选择车间</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-content">
            <div class="left-sidebar">
                <div class="sidebar-header">
                    <h3>员工列表</h3>
                </div>
                <div class="search-box">
                    <input type="text" id="employeeSearch" placeholder="搜索员工（姓名/工号/电话）">
                </div>
                <div class="employee-list" id="employeeList">
                    <!-- 员工列表动态生成 -->
                </div>
            </div>

            <div class="right-content">
                <div class="top-controls">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 60px;">班次：</label>
                        <div class="layui-input-inline" style="width: 220px;">
                            <select id="shiftSelect" lay-filter="shiftSelect">
                                <option value="">请选择班次</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 60px;">日期：</label>
                        <div class="layui-input-inline" style="width: 120px;">
                            <input type="text" id="startDate" placeholder="开始日期" class="layui-input">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 120px;">
                            <input type="text" id="endDate" placeholder="结束日期" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: auto;">
                        <button class="layui-btn" id="autoSchedule"><i class="layui-icon layui-icon-util"></i>
                            自动排班</button>
                        <button class="layui-btn layui-btn-normal" id="saveSchedule"><i
                                class="layui-icon layui-icon-ok"></i> 保存排班</button>
                    </div>
                </div>

                <div class="shift-times-info" id="shiftTimesInfo">
                    <div class="shift-times-header">班次时间段：</div>
                    <div id="shiftTimesContainer">
                        <!-- 班次时间段动态生成 -->
                    </div>
                </div>

                <div class="schedule-table-container">
                    <table class="schedule-table" id="scheduleTable">
                        <thead>
                            <tr>
                                <th class="time-column">时间段</th>
                                <!-- 日期列将由JavaScript动态生成 -->
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 排班表动态生成 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="../../assets/lib/layui/layui.js"></script>
        <script type="text/javascript" src="../../assets/lib/layui/custom.js"></script>
        <script type="text/javascript">
            layui.config({ base: '../../js/rosterManage/', version: skyeyeVersion }).use('writeRosterManage');
        </script>
</body>

</html>